<template>
    <el-dialog
        :before-close="resetForm"
        :close-on-click-modal="false"
        :visible.sync="visible"
        append-to-body
        title="菜单权限信息列表"
        width="800px"
    >
        <div class="list_page_div">
            <page-list :data-list="dataList" :height="height" :loading="loading" :table-config="tableConfig" show-index
                       show-operate operate-width="120px">
                <template #searchArea>
                    <div class="show_title_div">菜单信息：{{ menuInfo.powerName }}</div>
                    <el-button type="primary" @click="editData()">新增</el-button>
                </template>
                
                <template #item_enableFlag="scope">
                    {{ $common.getDicName('yesNo', scope.row.enableFlag) }}
                </template>
                
                <template #operateContent="scope">
                    <el-button type="text" @click="editData(scope.row.id)">编辑</el-button>
                    <el-popconfirm title="是否确定删除当前数据？" @confirm="delData(scope.row.id)">
                        <el-button slot="reference" type="text">删除</el-button>
                    </el-popconfirm>
                </template>
            </page-list>
            <!--编辑-->
            <power-btn-edit :visible.sync="showEdit" :id="id" :parents-id="menuInfo.id" @refreshList="searchList"></power-btn-edit>
        </div>
    </el-dialog>
</template>

<script>
import PageList from "@/components/grid/pageList";
import PowerBtnEdit from "./powerBtnEdit";

export default {
    name: "powerBtnList",
    components: {PowerBtnEdit, PageList},
    props: {
        visible: Boolean,
        menuInfo: Object,
    },
    data() {
        return {
            height: 300,
            loading: false,
            showEdit: false,
            
            id: 0,
            tableConfig: [
                {label: "显示名称", prop: "powerName", width: 200},
                {label: "权限", prop: "powerCode", minWidth: 200},
                {label: "启用", prop: "enableFlag", width: 50, slot: true},
            ],
            dataList: [],
            param: {
                showType: 2,
                field: 'order_num',
                order: 'asc',
            }
        }
    },
    watch: {
        visible(newVal) {
            if (newVal) {
                this.searchList();
            }
        }
    },
    methods: {
        searchList() {
            this.$axios.post("/CHILD_SYSTEM/systemPower/getBtnList/" + this.menuInfo.id).then(res => {
                this.dataList = res.data;
            }).finally(() => {
                this.loading = false;
            })
        },
        editData(id) {
            this.id = id;
            this.showEdit = true;
        },
        delData(id) {
            this.loading = true;
            this.$axios.post("/CHILD_SYSTEM/systemPower/delete/" + id).then(res => {
                this.searchList();
                this.$message.success(res.message);
            }).finally(() => {
                this.loading = false;
            })
        },
        resetForm() {
            this.$emit('update:visible', false);
            this.$emit('refreshList');
        }
    }
}
</script>

<style scoped>

</style>